<template>
  <div>
    <div class="tab-con">
      <div id="comment-0">
        <div class="comment-item">
          <div class="user-column">
            <div class="user-info">
              <img src="../../../../../../assets/img/details/peisong.jpg" alt />
              古***8
            </div>
            <div class="user-level">
              <span style="color: rgb(136, 136, 136);"></span>
            </div>
          </div>
          <div class="comment-column J-comment-column">
            <div class="comment-star star5"></div>
            <p class="comment-con">很喜欢，很清新淡雅的香味，不浓烈，很有女神范！准备以后长期用这个牌子了，物流好快，服务也很好，是一次不错的体验。</p>
            <div class="pic-list J-pic-list">
              <a href class="J-thumb-img">
                <img src="../../../../../../assets/img/details/ba77de82fc7422f8.jpg" alt />
              </a>
              <a href class="J-thumb-img">
                <img src="../../../../../../assets/img/details/ba77de82fc7422f8.jpg" alt />
              </a>
            </div>
            <div class="comment-message">
              <div class="order-info">
                <span>一生之水女士香水25ml</span>
                <span>2018-12-29 20:20</span>
              </div>
              <div class="comment-op">
                <a href class="J-report">举报</a>
                <a href class="J-nice">
                  <i class="sprite-praise"></i>
                  1
                </a>
                <a href>
                  <i class="sprite-comment"></i>
                  0
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {};
</script>

<style scoped>
.tab-con {
  padding: 10px 0;
}
.comment-item {
  zoom: 1;
  padding: 15px;
  border-bottom: 1px solid #ddd;
}
.comment-item .user-column {
  width: 140px;
  float: left;
}
.comment-item .user-info {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.comment-item .user-info img {
  border-radius: 50%;
  margin-right: 5px;
  width: 25px;
}
.comment-item .user-level {
  padding-top: 3px;
}
.user-level span {
  margin-right: 8px;
}
.comment-item .comment-column {
  margin-left: 150px;
}
.comment-item .star5 {
  background-position: 0 0;
}
.comment-item .comment-star {
  width: 78px;
  height: 14px;
  background: url(../../../../../../assets/img/details/star.png) no-repeat;
}
.comment-item .comment-con {
  font-size: 14px;
  padding: 10px 0;
  line-height: 180%;
  color: #333;
}
.comment-item .pic-list {
  padding-bottom: 15px;
}
.pic-list a {
  display: inline-block;
  position: relative;
}
.pic-list img {
  border: 1px solid #e2e2e2;
  padding: 1px;
  margin-right: 6px;
}
.comment-item .order-info {
  float: left;
  color: #999;
}
.order-info span {
  margin-right: 20px;
}
.comment-item .order-info span {
  margin-right: 20px;
}
.comment-op {
  float: right;
}
.comment-item .comment-op a {
  display: inline-block;
  margin-left: 25px;
  color: #666;
}
.comment-op i {
  margin-right: 5px;
  vertical-align: -2px;
}
.comment-item .sprite-comment {
  display: inline-block;
  background-position: -48px -34px;
  width: 16px;
  height: 16px;
  background-image: url(../../../../../../assets/img/details/5.png);
}
.comment-item .sprite-praise {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url(../../../../../../assets/img/details/5.png);
  background-position: -32px -34px;
}
.comment-message {
  overflow: hidden;
}
</style>


